<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MyBlog</title>
	<link rel="stylesheet" type="text/css" href="source/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="source/css/default.css"/>
	<link rel="stylesheet" type="text/css" href="source/css/styles.css"/>
	<script type="text/javascript" src="source/js/jquery-3.4.1.js"></script>
	<script type="text/javascript"> 
	$(document).ready(function(){ 
		//查询blog
	    $("#a_search").click(function(){
	    	var type = $("#type_select option:selected").val();
	    	var title = $("#search_input").val();
	    	if(title == ""){ 
	    		
	    	}else{
	    		window.location.href="searchBlog?type="+type+"&title="+title; 
	    	}
	    	
	    	
	    	
	    });
		/* 登录事件*/
		$("#login").click(function(){
			var user = $("#login_user").val();
			var pass = $("#login_pass").val();
			
			if(user == ""){
				$("#login_msg").css("color","#FF0000");
				$("#login_msg").text("用户名不能为空！");
				$('#img_code').trigger("click");
			}else if(pass == ""){
				$("#login_msg").css("color","#FF0000");
				$("#login_msg").text("密码不能为空！");
				$('#img_code').trigger("click");
			}else{
				
				$.post("doLogin",{
					username:user,
					password:pass,
					loginCode :$("#login_code").val()
					},
					function(data,status){
						if(data.state == 1){
							$("#login_msg").css("color","#00FF00");
							$("#login_msg").text(data.msg);
							window.location.href=data.url;
						}else{
							$("#login_msg").css("color","#FF0000");
							$("#login_msg").text(data.msg);
							$('#img_code').trigger("click"); 
						}
						
					
				});
				
			}
			
        });
		/* 注册事件*/
		
		$("#register").click(function(){
			
			var user = $("#register_user").val();
			var pass = $("#register_pass").val();
			var email = $("#register_email").val();
			$("#register_msg").css("color","red");
			
			if(email == ""){
				$("#register_msg").text("邮箱不能为空！");
			}
			if(pass == ""){
				$("#register_msg").text("密码不能为空！");
			}
			if(user == ""){
				$("#register_msg").text("用户名不能为空！");
			}
			var type = 0;
			if(user!="" && pass!="" && email!=""){
				var $accRegular = /^[a-zA-Z]{1}\w{3,15}$/;
				var $passRegular = /^\w{4,10}$/;
				var $mailRegular = /^\w{1,10}@\w{0,3}.\w{3}$/;
				if (!$mailRegular.test(email)) {
					
					type = 1;
				}
				if (!$passRegular.test(pass)) {
					
					type = 2;
				}
				
				if (!$accRegular.test(user)) {
					
					type = 3;
				}
				$("#register_msg").css("color","#FF0000");
				if(type ==1){
					$("#register_msg").text("邮箱格式错误！");
				}else if(type == 2){
					$("#register_msg").text("密码格式错误（只能为4-10个字母可含数字）！");
				}else if(type == 3){
					$("#register_msg").text("用户名格式错误（为4-15个以字母开头可含数字）！");
				}else if(email != "" && user != "" && pass != ""){
					//发送请求ajax
					
					$("#register_msg").css("color","#FFFF00");
					$("#register_msg").text("正在处理请求......");
					$.post("doRegister",{
						username:user,
						password:pass,
						email:email
						},
						function(data,status){
							if(data.state == 1){
								$("#register_msg").css("color","#00FF00");
								$("#register_msg").text(data.msg);
							}else{
								$("#register_msg").css("color","#FF0000");
								$("#register_msg").text(data.msg);
							}
							
						
					});
					
				}
				
			
			}
			
			
        });
		//重新加载验证码
		$("#img_code").click(function(){
			$(this).attr("src","http://localhost:8080/myBlog/CheckCodeServlet?"+new Date().getTime()); 
		});
		
		/**查看用户名是否存在*/
		$("#register_user").change(function(){
			var user = $("#register_user").val();
			$.post("findUser",{
				username:user
				},
				function(data,status){
					if(data.state == 1){
						$("#register_msg").css("color","#00FF00");
						$("#register_msg").text(data.msg);
					}else{
						$("#register_msg").css("color","red");
						$("#register_msg").text(data.msg);
					}
					
				
			});
		});
		
	}); 
	</script>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header" style="background-color:#EAEAEA">
			<h1><a href="index"><img alt="首页" width="70px" src="source/img/logo.svg"></a> <span></span></h1>
			
		</header>
		<div class="login-wrap">
		
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
				<div class="login-form">
					<div class="sign-in-htm">
						<div class="group">
							<label for="user" class="label">用户名</label>
							<input id="login_user" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label">密码</label>
							<input id="login_pass" type="password" class="input" data-type="password">
						</div>
						<div class="group">
						
							<label for="code" class="label">验证码</label>
							<div>
							<input style="float:left; width:60%;" id="login_code" type="text" class="input" data-type="text">
							
							<img width="40%" style="float:right;" height="50.8px" id="img_code" src="http://localhost:8080/myBlog/CheckCodeServlet">
							</div>
						</div>
						
						<div class="group" style="clear:both;">
						
							<br/>
							<input id="check" type="checkbox" class="check" checked>
							<label for="check"><span class="icon"></span>记住密码</label><a href="#forgot" style="margin-left:220px">忘记密码?</a>
						</div>
						<div class="group">
							<input id="login" type="submit" class="button" value="登录">
						</div>
						<hr>
						<div class="foot-lnk">
							<label  id="login_msg" ></label>
						</div>
					</div>
					<div class="sign-up-htm">
						<div class="group">
							<label for="user" class="label">用户名</label>
							<input id="register_user" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label">密码</label>
							<input id="register_pass" type="password" class="input" data-type="password">
						</div>
						
						<div class="group">
							<label for="email" class="label">邮箱</label>
							<input id="register_email" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label"> &nbsp;</label>
							<input id="register" type="submit" class="button" value="注册">
						</div>
						<hr>
						<div class="foot-lnk">
							<label id="register_msg" ></label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="related">
		    <h4>MyBlog</h4>
		    
		</div>
	</div>
	
</body>
</html>